<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>页面使用pdfjs加载PDF文件支持IE</title>
        <style type="text/css">
            body {
                background-color: #ccc;
            }

            .pdfClass {
                margin-bottom: 10px;
            }

            .wrapper {
                width: 820px;
                max-height: 600px;
                overflow: auto;
                margin: 0 auto;
            }
        </style>

        <script src="../../js/jquery-3.2.1.min.js"></script>
        <script src="../../js/pdf/pdf.js"></script>
    </head>
    <body>
        <div class="wrapper">
            <button onclick="loadPdf()">加载</button>
            <span id="pageNum">
                
            </span>
        </div>
        <div class="wrapper" id="pdf-container"></div>

        <script>
            var pageRenderNum = 1; // 当前渲染页码
            var totalPageNum = 1; // 总页数
            $(function() {
                loadPdf("http://oss-trading.duoduozb.com/27988866-fea8-4c16-8caa-afd8c53a2623.pdf");
            })

            /**
             * 加载pdf
             */
            function loadPdf(fileURL) {
                fileURL = fileURL || "http://oss-trading.duoduozb.com/27988866-fea8-4c16-8caa-afd8c53a2623.pdf";
                PDFJS.workerSrc = '../../js/pdf/pdf.worker.js';
                PDFJS.getDocument(fileURL).then(function(pdf) {
                    console.log(pdf);
                    //用 promise 获取页面
                    var id = '';
                    var idTemplate = 'cw-pdf-';
                    var pageNum = pdf.numPages; // 总页数
                    //根据页码创建画布
                    createSeriesCanvas(pageNum, idTemplate);
                    totalPageNum = pageNum;
                    // 渲染pdf
                    renderPDF(pdf, pageRenderNum, 'cw-pdf-' + pageRenderNum);
                });
            }

            /**
             * 创建和pdf页码等数的canvas
             */
            function createSeriesCanvas(num, template) {
                // 重置页码
                totalPageNum = 1;
                pageRenderNum = 1;
                
                // 清空canvas
                var canvasDoms = document.getElementsByClassName("pdfClass");
                if (canvasDoms.length) {
                    for (var i = 0; i < canvasDoms.length; i++) {
                        canvasDoms[i].getContext('2d').clearRect(0, 0, 0, 0);
                    }
                }
                
                $("#pdf-container").empty();
                
                var id = '';
                for (var j = 1; j <= num; j++) {
                    id = template + j;
                    $("#pdf-container").append('<canvas id="' + id + '" class="pdfClass"></canvas>');
                }
            }

            /**
             * 渲染pdf
             */
            function renderPDF(pdf, i, id) {
                pdf.getPage(i).then(function(page) {
                    // 识别pdf中文本
                    page.getTextContent().then(function(textContent) {
                        var str = ""
                        for (let j = 0; j < textContent.items.length; j++) {
                            str += textContent.items[j].str
                        }
                        // console.log (i);
                        document.querySelector("#pageNum").innerHTML = pageRenderNum + "/" + totalPageNum;
                        // console.log("page.. str = " + str)
                    });

                    var scale = 96.0 / 72.0;
                    var viewport = page.getViewport(scale);
                    //  准备用于渲染的 canvas 元素
                    var canvas = document.getElementById(id);
                    var context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    // 将 PDF 页面渲染到 canvas 上下文中
                    var renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };
                    var renderTask = page.render(renderContext);

                    renderTask.promise.then(function() {
                        if (pageRenderNum < totalPageNum) {
                            pageRenderNum++;
                            renderPDF(pdf, pageRenderNum, 'cw-pdf-' + pageRenderNum);
                        }
                    });
                });
            }
        </script>
    </body>
</html>
